import React from 'react';
import { Space, Button } from 'tdesign-react';
import { SoundIcon } from 'tdesign-icons-react';
import TypingGame from '../components/typing/TypingGame';
import { useSound } from '../hooks/useSound';
import { themeColors, spacing, borderRadius } from '../theme/theme';

const TypingGameView: React.FC = () => {
  const { isEnabled: soundEnabled, toggleSound } = useSound();
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 900);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 900);
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleScoreUpdate = () => {
    // Score update logic if needed
  };

  const backgroundStyle: React.CSSProperties = {
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #FFE082 100%)',
    position: 'relative',
    overflow: 'hidden',
    padding: isMobile ? spacing.m : spacing.xl,
  };

  const backgroundPatternStyle: React.CSSProperties = {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
    pointerEvents: 'none',
    animation: 'backgroundMove 20s ease-in-out infinite'
  };

  const floatingIconStyle = (delay: number, position: React.CSSProperties): React.CSSProperties => ({
    position: 'absolute',
    fontSize: isMobile ? '2rem' : '4rem',
    opacity: isMobile ? 0.4 : 0.3,
    animation: `float 6s ease-in-out ${delay}s infinite`,
    zIndex: 1,
    ...position
  });

  const soundToggleStyle: React.CSSProperties = {
    position: 'fixed',
    bottom: isMobile ? spacing.l : spacing.xl,
    right: isMobile ? spacing.l : spacing.xl,
    zIndex: 1000,
    width: isMobile ? '48px' : '64px',
    height: isMobile ? '48px' : '64px',
    borderRadius: '50%',
    boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
    transition: 'all 0.3s ease'
  };

  const containerStyle: React.CSSProperties = {
    maxWidth: '1200px',
    margin: '0 auto',
    position: 'relative',
    zIndex: 2,
    padding: spacing.m
  };

  return (
    <div style={backgroundStyle}>
      {/* 背景图案 */}
      <div style={backgroundPatternStyle} />
      
      {/* 浮动的装饰图标 */}
      <div style={floatingIconStyle(0, { top: '10%', left: isMobile ? '2%' : '5%' })}>🌟</div>
      <div style={floatingIconStyle(1, { top: '20%', right: isMobile ? '5%' : '10%' })}>⭐</div>
      <div style={floatingIconStyle(2, { top: '60%', left: isMobile ? '3%' : '8%' })}>🎈</div>
      <div style={floatingIconStyle(3, { top: '70%', right: isMobile ? '8%' : '15%' })}>🎉</div>
      <div style={floatingIconStyle(4, { top: '40%', left: isMobile ? '1%' : '3%' })}>🎮</div>
      <div style={floatingIconStyle(5, { top: '30%', right: isMobile ? '2%' : '5%' })}>🏆</div>
      {!isMobile && (
        <>
          <div style={floatingIconStyle(6, { top: '15%', left: '15%' })}>🎯</div>
          <div style={floatingIconStyle(7, { top: '80%', left: '20%' })}>🚀</div>
          <div style={floatingIconStyle(8, { top: '25%', right: '25%' })}>💎</div>
          <div style={floatingIconStyle(9, { top: '55%', right: '8%' })}>🎪</div>
        </>
      )}

      <div style={containerStyle}>
        <TypingGame onScoreUpdate={handleScoreUpdate} />
      </div>

      {/* 音效切换按钮 */}
      <Button
        shape="circle"
        theme="primary"
        size={isMobile ? 'medium' : 'large'}
        onClick={toggleSound}
        style={soundToggleStyle}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'scale(1.1)';
          e.currentTarget.style.boxShadow = '0 6px 25px rgba(0,0,0,0.4)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'scale(1)';
          e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
        }}
      >
        {soundEnabled ? <SoundIcon /> : <SoundIcon style={{ opacity: 0.5 }} />}
      </Button>

      <style>{`
        @keyframes backgroundMove {
          0%, 100% { transform: translateX(0) translateY(0); }
          25% { transform: translateX(-10px) translateY(-5px); }
          50% { transform: translateX(10px) translateY(10px); }
          75% { transform: translateX(-5px) translateY(5px); }
        }
        
        @keyframes float {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          25% { transform: translateY(-15px) rotate(5deg); }
          50% { transform: translateY(-25px) rotate(0deg); }
          75% { transform: translateY(-10px) rotate(-5deg); }
        }
      `}</style>
    </div>
  );
};

export default TypingGameView;